import { Col, Row, Input, Button, Drawer, notification } from 'antd'
import React, { Component } from 'react'
import CashierOrderItem from './CashierOrderItem/CashierOrderItem'
import '../../Cashier/Cashier.css'
import { connect } from 'react-redux'
import { createSeach, createClaerOrder,createDelOrderItem } from '../../../redux/action/cashier_orderItem_action'
import CashierSelectItem from './CashierSelectItem/CashierSelectItem'
import axios from 'axios'
import cookies from 'react-cookies'

class CashierCreateOrder extends Component {

    state = { count: 0, sumMoney: 0, visible: false, selectOrderItem: null }

    selectOrderItem = (item) => {
        // return;
        let {obj} = item
        let {selectOrderItem}=this.state
        if(null===selectOrderItem){
            this.setState({ selectOrderItem: item },()=>{
                var elem = this.state.selectOrderItem.obj
                elem.style.backgroundColor = 'aqua'
            })
            return
        }
        if (obj !== selectOrderItem.obj) {
            var elem = selectOrderItem.obj
            elem.style.backgroundColor = 'white'
            this.setState({ selectOrderItem: item },()=>{
                var elem = this.state.selectOrderItem.obj
                elem.style.backgroundColor = 'aqua'
            })
        }
        if (obj===selectOrderItem.obj) {
            var elem = selectOrderItem.obj
            elem.style.backgroundColor = 'white'
            this.setState({ selectOrderItem: null })
        }

    }


    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    test = (value) => {
        axios
            .get(`http://localhost:5500/ant/ant/Store/${cookies.load("userStore")}/SearchCommodity?key=${value}`)
            .then(response => {
                this.props.Seach([...response.data])
            })
        // this.props.Seach({ key: input.currentTarget.value }
    }

    settleAccounts = () => {
        const { cashierOrder } = this.props

        let data = {
            "userID": parseInt(cookies.load('userID')),
            "addCommodities": []
        }
        cashierOrder.forEach(item => {
            let temp = {
                "CommodityId": item.cid,
                "Count": item.count,
                "CopeWith": item.price * item.count,
                "UnitPrice": item.price
            }
            data.addCommodities.push(temp)
        });
        console.log(data);
        axios
            .post(`http://localhost:5500/ant/ant/Sales/${cookies.load('userStore')}/AddOrder`, data)
            .then(response => {
                notification['success']({
                    message: '结账成功',
                    description: '请在上一单查看详情'
                })
                this.props.claerOrder()
            })
            .catch(err => {
                notification['warning']({
                    message: '结账失败',
                    description: '请稍后再试'
                })
            })
    }

    claerSeach = () => {
        this.seachInput.state.value = ""
    }

    render() {
        const { cashierOrder, cashierSearch } = this.props
        this.count = 0;
        var tempCount = 0, tempMoney = 0;
        for (const key in cashierOrder) {
            if (Object.hasOwnProperty.call(cashierOrder, key)) {
                const item = cashierOrder[key];
                tempCount += item.count
                tempMoney += item.price * item.count

            }
        }
        return (
            <div style={{ padding: "20px" }}>
                <Drawer
                    title="结账"
                    width={300}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    bodyStyle={{ paddingBottom: 80 }}
                    footer={
                        <div
                            style={{
                                textAlign: 'right',
                            }}
                        >
                            <Button onClick={() => { this.settleAccounts(); this.onClose(); }} type="primary">
                                确认
                        </Button>
                        </div>
                    }
                >

                    <Row>
                        <Col span={12}>
                            名称
                                    </Col>
                        <Col span={4}>
                            单价
                                    </Col>
                        <Col span={4}>
                            数量
                                    </Col>
                        <Col span={4}>
                            小计
                                    </Col>
                    </Row>
                    {
                        this.props.cashierOrder.map((item, index) =>

                            <Row key={index} style={{ margin: '5px 0px', borderBottom: '1px solid aqua' }}>
                                <Col span={12}>
                                    {item.cname}
                                </Col>
                                <Col span={4}>
                                    {item.price.toFixed(2)}
                                </Col>
                                <Col span={4}>
                                    {item.count}
                                </Col>
                                <Col span={4}>
                                    {(item.price * item.count).toFixed(2)}
                                </Col>
                            </Row>
                        )
                    }

                    <Row>
                        <Col span={6} offset={18}>
                            总计：{tempMoney}
                        </Col>
                    </Row>
                </Drawer>
                <Row>
                    <Col span={20}>
                        <Row>
                            <Col span={12} style={{padding:'10px 40px'}}>
                                <h3>结账</h3>
                            </Col>
                            <Col style={{ borderLeft: "4px solid aqua" }} span={6}>
                                <div style={{ paddingLeft: "20px" }}>件数</div>
                                <div style={{ paddingLeft: "20px", fontSize: "25px", fontWeight: 700 }}>{tempCount}</div>
                            </Col>
                            <Col style={{ borderLeft: "4px solid aqua" }} span={6}>
                                <div style={{ paddingLeft: "20px" }}>金额(￥)</div>
                                <div style={{ paddingLeft: "20px", fontSize: "25px", fontWeight: 700 }}>{tempMoney.toFixed(2)}</div>
                            </Col>
                        </Row>
                        <Row style={{}}>
                            <Col span={24} style={{ position: "relative" }}>
                                <div style={{ position: "absolute", width: "100%" }}>

                                    <Input
                                        ref={input => this.seachInput = input}
                                        onChange={(input) => this.test(input.currentTarget.value)}
                                        style={{ position: "relative", margin: "10px 0px", lineHeight: "50px", height: "50px" }}
                                        placeholder="搜索"
                                    />
                                </div>
                                <div id="seachItemBox" style={{ height: cashierSearch.length === 0 ? '0px' : 'auto', maxHeight: "600px", overflowY: "scroll", border: "1px solid aqua", textAlign: "center", background: "white", zIndex: 1, borderRadius: "0px 0px 5px 5px", position: "absolute", marginTop: "58px", width: "100%" }}>
                                    {
                                        cashierSearch.map((item, index) =>
                                            <CashierSelectItem
                                                seachCallBack={() => this.claerSeach()} key={index} {...item}
                                            >
                                            </CashierSelectItem>
                                        )
                                    }
                                </div>
                            </Col>
                        </Row>
                        <Row style={{ marginTop: "80px" }}>
                            <Col span={4}>
                                <div>行数</div>
                            </Col>
                            <Col span={6}>
                                <div>商品</div>
                            </Col>
                            <Col span={6}>
                                <div>单价</div>
                            </Col>
                            <Col span={4}>
                                <div>数量</div>
                            </Col>
                            <Col span={4}>
                                <div>小计</div>
                            </Col>
                        </Row>
                        <div style={{ overflowY: "scroll", height: "485px" }}>
                            {
                                this.props.cashierOrder.map((item, index) =>
                                        <CashierOrderItem
                                            key={index} {...item}
                                            selectItem={this.selectOrderItem}
                                            
                                        >

                                        </CashierOrderItem>
                                )
                            }


                        </div>
                    </Col>
                    <Col span={4}>
                        <div style={{ padding: "20px" }}>

                            <Button className="CashierOrderItemBtnEdit" onClick={this.showDrawer} type="primary" block danger>结账</Button>
                            <Button className="CashierOrderItemBtnEdit" onClick={()=>{
                                if(this.state.selectOrderItem){
                                    this.props.delOrderItem(this.state.selectOrderItem.row)}}}
                                     type="primary" block >删行</Button>
                                
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}
export default connect(
    status => ({ ...status }),
    {
        Seach: createSeach,
        claerOrder: createClaerOrder,
        delOrderItem:createDelOrderItem
    }
)(CashierCreateOrder)